<template>
  <page-content :left="true">
    <lz-form
      ref="form"
      :get-data="getData"
      :submit="onSubmit"
      :errors.sync="errors"
      :form.sync="form"
      :inDialog="false"
    >
      <lz-form-item 
        label="名称" 
        required 
        prop="name"
      >
        <a-input v-model="form.name"/>
      </lz-form-item>
      <lz-form-item 
        label="标识" 
        required 
        prop="slug"
      >
        <a-input v-model="form.slug"/>
      </lz-form-item>
      <lz-form-item 
        label="请求方式" 
        prop="http_method"
      >
        <a-select v-model="form.http_method" mode="multiple" show-arrow>
          <a-select-option v-for="i of methods" :key="i">{{ i }}</a-select-option>
        </a-select>
      </lz-form-item>
      <lz-form-item 
        label="路径" 
        prop="http_path"
      >
        <a-input 
          :auto-size="{ minRows: 5, maxRows: 5 }" 
          type="textarea" 
          v-model="form.http_path"
          :placeholder="'格式1：/路径\n格式2：请求方式:/路径'"
        />
      </lz-form-item>
    </lz-form>
    <div>
      <a-anchor
        :affix="true"
        :get-current-anchor="getCurrentAnchor"
        :target-offset="targetOffset"
      >
        <template  v-if="edit" v-for="j of configs">
          <a-anchor-link 
            v-for="i of j.list"
            :title="i.name" 
            :href="`#/admin-permissions/`+$route.params.id+`/edit${$route.hash && $route.hash.includes(i.slug) ? $route.hash : '#'+i.slug}`" 
          />
        </template>
        <template  v-else v-for="j of configs">
          <a-anchor-link 
            v-for="i of j.list"
            :title="i.name" 
            :href="`#/admin-permissions/create${$route.hash && $route.hash.includes(i.slug) ? $route.hash : '#'+i.slug}`" 
          />
        </template>
      </a-anchor>
    </div>
  </page-content>
</template>

<script>
import LzForm from '@c/LzForm'
import LzFormItem from '@c/LzForm/LzFormItem'
import PageContent from '@c/PageContent'
import { mapConstants } from '@/libs/constants'
import { checkRequired } from '@/libs/utils'
import {
  createAdminPermission,
  editAdminPermission,
  storeAdminPermission,
  updateAdminPermission,
} from '@/api/admin-permissions'

export default {
  name: 'Form',
  components: {
    LzForm,
    LzFormItem,
    PageContent
  },
  data() {
    return {
      edit: false,
      form: {
        slug: '',
        name: '',
        http_method: [],
        http_path: '',
      },
      errors: {},
      methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'OPTIONS', 'HEAD'],
      configs: [
        {
          group: null,
          list: [
            {
              name: "名称",
              slug: "name",
            },
            {
              name: "标识",
              slug: "slug",
            },
            {
              name: "请求方式",
              slug: "http_method",
            },
            {
              name: "路径",
              slug: "path",
            },
          ]
        }
      ],
      targetOffset: undefined,
    }
  },
  mounted() {
    this.targetOffset = window.innerHeight / 2;
  },
  computed: {
    ...mapConstants(['CONFIG_TYPES']),
  },
  methods: {
    checkRequired,
    async getData($form) {
      let data
      if ($form.realEditMode) {
        ({ data } = await editAdminPermission($form.resourceId))
        data.http_path = data.http_path.join('\n')
        this.edit = true
      } else {
        ({ data } = await createAdminPermission())
      }
      return data
    },
    async onSubmit($form) {
      if (this.edit) {
        await updateAdminPermission($form.resourceId, this.form)
      } else {
        await storeAdminPermission(this.form)
      }
    },
    getCurrentAnchor() {
      if (this.edit) {
        return '#/admin-permissions/create'+this.$route.hash;
      } else {
        return '#/admin-permissions/'+this.$route.params.id+'/edit'+this.$route.hash
      }
    },
  },
}
</script>
<style>
.ant-anchor-wrapper {
  margin-left: 30px;
}
</style>